<template>
	<view class="main"><!--添加用户-->
		<view class="userInfo">
			<view>
				<view class="tit">信息填写</view>
				<view>为了更好的服务，请填写您的亲人信息</view>
			</view>
			<image src="@/static/images/addCont.png" style="width:260rpx;" mode='widthFix'></image>
		</view>
		<view class="userForm">
			<view class="userInput"><text>真实姓名</text><input placeholder="请输入真实姓名" v-model="userForm.name"></view>
			<view class="userInput"><text>身份证码号</text><input placeholder="请输入身份证码号" v-model="userForm.cardId"></view>
			<view class="userInput"><text>电话号码</text><input placeholder="请输入电话号码" v-model="userForm.mobile"></view>
			
		</view>
		
	

		
		
		<view class="userbtn">
			<view class="btn btn1" @tap="backPage">取消</view>
			<view class="btn btn2" @tap="submit">确认添加</view>
		</view>
			<u-toast ref="uToast" />
		<u-modal v-if="user" :show="show" title="提示" :showCancelButton="true" @confirm="conSubmit" @cancel="show=false">
			<view class="slot-content modalView">
				已有：真实姓名:<text class="modalViewTxt">{{user.name}}</text><br>
				身份证码号:<text class="modalViewTxt">{{user.cardId}}</text></br>
				电话号码：<text class="modalViewTxt">{{user.mobile}}</text>的用户信息,<br>确认关注此人？
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:null,
				show:false,
				userForm:{
					cardId:"",
					mobile:"",
					name:""
				}
			}
		},
		onLoad(){
			// uni.showLoading({
			// 	title: '处理中...',
			// 	mask: false
			// });
			// this.user={
			// 	cardId:"123",
			// 	mobile:"124",
			// 	name:"234"
			// }
			// this.show=true;
		},
		methods: {
			backPage(){
				this.$tools.backPrePage()
			},
			findCustomerInfoForCardId(){
				return this.$http.findCustomerInfoForCardId({cardId:this.userForm.cardId})
			},
			submitForm(data){
				uni.showLoading({
					title: '处理中...',
					mask: true
				});
				this.$http.addCustomerInfo(data).then(res=>{
					
					if(res.code==0){
						this.$tools.msg("关注成功！")
						setTimeout(res=>{
							uni.hideLoading();
							uni.redirectTo({
								url:'/pages/index/index'
							})
						},2000)
					}else{
						uni.hideLoading();
					}
				})
			},
			conSubmit(){
				this.submitForm(this.user)
			},
			async submit(){
				if(!this.userForm.name){
					this.$tools.msg("请输入真实姓名")
					return;
				}
				if(this.userForm.name.length>20){
					this.$tools.msg("真实姓名不超过20个字符")
					return;
				}
				if(!this.userForm.cardId){
					this.$tools.msg("请输入身份证码号")
					return;
				}
				if (!this.$tools.checkParity(this.userForm.cardId)) {
					this.$tools.msg('请输入正确的身份证号')
					return false
				}
				if(!this.userForm.mobile){
					this.$tools.msg("请输入电话号码")
					return;
				}
				if(!this.$tools.validatePhoneNumber(this.userForm.mobile)){
					this.$tools.msg("请输入正确的手机号")
					return;
				}


				let yz = await this.findCustomerInfoForCardId();
				console.log(yz.info)
				if(!yz.info){
					this.submitForm(this.userForm)
				}else{//已经关注
					if(yz.relation){
						this.$tools.msg("已关注此用户！")
						setTimeout(res=>{
							uni.redirectTo({
								url:'/pages/index/index'
							})
						},2000)
						
					}else{
					  //	
					  let info = yz.info;
					  this.user=yz.info;
					  this.show = true;
						
					}
				}
				
				return;
				
				
				
				
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/css/app.scss");
	.modalViewTxt{font-weight: bold;}
	.main{
		background-color:#e7fcf5;
		box-sizing: border-box;
		min-height: 100vh;
	}
	
	.modalView{font-size:30rpx;}
</style>
